<template>
  <div class="content" v-loading="isLoading">
    <p>
      <strong>解释：</strong
      >本系统会在每周日12:00，通过邮件的形式，提醒本周还未上传培训记录的组长上传本周记录
    </p>
    <div class="row">
      <label for="" class="groupName"> <strong>全局开关：</strong> </label>
      <el-switch v-model="globalisSend" @change="globalisSendHandler()">
      </el-switch>
    </div>
    <hr />
    <div v-if="globalisSend">
      <div v-for="item in groupisSendList" :key="item.groupId" class="row">
        <label class="groupName" for="">{{ item.groupName }}</label>
        <el-switch
          :disabled="!globalisSend"
          v-model="item.isSend"
          @change="isSendChangeHandler(item)"
        >
        </el-switch>
      </div>
    </div>
  </div>
</template>
<script>
export default {
  components: {},
  data() {
    return {
      globalisSend: true,
      isLoading: false,
      groupisSendList: [
        {
          groupId: 123,
          groupName: "测试1",
          isSend: true,
        },
      ],
    };
  },
  created() {
    this.getglobalisSend();
  },
  mounted() {},
  methods: {
    /**
     * 获取该功能的全局开关
     */
    async getglobalisSend() {
      const res = await this.$axios.get(`${this.HOST}/config/api/getSendState`);
      if (res.data.meta.code == 200) {
        this.globalisSend = res.data.data.state;
        console.log("获取功能的全局开关成功！", this.globalisSend);
      }
      if (this.globalisSend == 1) {
        this.getGroupisSendList();
      }
    },
    /**
     * 修改全局开关
     */
    async globalisSendHandler() {
      this.isLoading = true;
      let flag = this.globalisSend ? "1" : "-1";
      const res = await this.$axios.get(
        `${this.HOST}/config/api/changeSendState/` + flag
      );
      if (res.data.meta.code == 200) {
        this.$message.success("修改成功！");
        this.getGroupisSendList();
      }
      this.isLoading = false;
    },
    /**
     * 获取所有小组是否邮件提醒的配置列表
     */
    async getGroupisSendList() {
      const res = await this.$axios.get(`${this.HOST}/config/api/sendGroup`);
      if (res.data.meta.code == 200) {
        this.groupisSendList = res.data.data.groups;
        console.log(
          "获取是否可直接导入名单组别信息成功！",
          this.groupisSendList
        );
      }
    },
    /**
     * 更新小组的是否邮件提醒的属性
     */
    async isSendChangeHandler(group) {
      this.isLoading = true;
      // console.log("groupInfo", group);
      let flag = group.isSend ? "1" : "0";
      const res = await this.$axios.get(
        `${this.HOST}/config/api/changeGroupSend/` + group.groupId + `/` + flag
      );
      if (res.data.meta.data == 200) {
        this.$message.success("更新成功！");
        this.getGroupisSendList();
      }
      this.isLoading = false;
    },
  },
};
</script>

<style lang="less" scoped>
.content {
  padding-left: 30px;
  padding-right: 30px;
  display: flex;
  flex-direction: column;
  justify-content: space-between;

  .row {
    margin-bottom: 10px;

    .groupName {
      display: inline-block;
      width: 100px;
      text-align: end;
      margin-right: 5px;
    }
  }
}
</style>